<template>
  <div class="device-count-card" :style="{ backgroundColor: bgColor }">
      <!-- 标题组件 -->
      <Title :title="title"></Title>

      <!-- 离线设备数显示 -->
      <div class="device-count-content">
          <div class="offline-count">
              <span class="count-number">{{ offlineDevices }}</span>
              <span class="count-label">离线设备数</span>
          </div>

          <!-- 图表容器（保留以备后用） -->
          <div ref="chartContainer" style="height: 10px;"></div>
      </div>
  </div>
</template>

<script>
import { get } from '@/utils/request';

export default {
  props: {
      // 允许父组件自定义背景颜色
      bgColor: {
          type: String,
          default: '#f5ffcc'
      },
      // 允许自定义标题
      title: {
          type: String,
          default: '离线设备统计'
      }
  },
  data() {
      return {
          offlineDevices: 0,
          empData: []
      };
  },
  methods: {
      // 获取离线设备数据
      async getOfflineDeviceData() {
          try {
              let res = await get('/dashboard/queryDeviceOnlineNumber');
              console.log(res, '获取响应');
              this.empData = res.data;
              // 假设接口返回的数据中，离线设备的 type 为 '离线'
              const offlineDeviceData = this.empData.find(item => item.type === '离线');
              this.offlineDevices = offlineDeviceData ? offlineDeviceData.value : 0;
          } catch (error) {
              console.error('获取离线设备数据失败:', error);
          }
      }
  },
  async mounted() {
      await this.getOfflineDeviceData();
  }
};
</script>

<style lang="less" scoped>
.device-count-card {
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
      transform: translateY(-2px);
  }

  .device-count-content {
      margin-top: 15px;
      text-align: center;

      .offline-count {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 120px;

          .count-number {
              font-size: 48px;
              font-weight: bold;
              color: #1890ff;
              line-height: 1;
          }

          .count-label {
              margin-top: 10px;
              font-size: 16px;
              color: #666;
          }
      }
  }
}
</style>    